<template>
	<view class="container">
		<view class="input-box">
			<image src="/static/search-icon.png"></image>
			<input type="text" v-model="keyword" :placeholder="$t('rechargeRecord.inputPlaceholder')"
				@input="handleSearchInput">
		</view>

		<view class="title flex-just-between">
			<text>{{ $t('rechargeRecord.time') }}</text>
			<view>{{ $t('rechargeRecord.amountOfMoney') }}</view>
		</view>

		<view class="list-box">
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-text">
				{{ $t('rechargeRecord.loading') }}
			</view>

			<!-- 空状态 -->
			<view v-else-if="rechargeList.length === 0" class="empty-text">
				{{ $t('rechargeRecord.noData') }}
			</view>

			<!-- 充值记录列表 -->
			<view class="item-box flex-just-between" v-for="(item, index) in rechargeList" :key="index">
				<view class="left-info flex-item-center">
					<image src="/static/icon.png"></image>
					<view class="info">
						<view class="card-name">{{ item.tokenType }}</view>
						<text class="time">
							{{ formatDate(item.createTime) }}</text>
					<!-- 	<view class="status" :class="'status-' + item.status">
							{{ getStatusText(item.status) }}
						</view> -->
					</view>
				</view>
				<view class="price" :class="'price-' + item.status">
					{{ formatAmount(item.amount) }}
				</view>
			</view>

			<!-- 分页加载 -->
			<view v-if="hasMore" class="load-more" @click="loadMore">
				{{ $t('rechargeRecord.loadMore') }}
			</view>
		</view>
	</view>
</template>

<script>
	import rechargeApi from '@/api/recharge.js'

	export default {
		data() {
			return {
				keyword: '', // 搜索关键词
				rechargeList: [], // 充值记录列表
				loading: false, // 加载状态
				page: 1, // 当前页码（默认1）
				limit: 15, // 每页数量（默认15）
				total: 0, // 总记录数
				hasMore: false, // 是否有更多数据
				searchTimer: null // 搜索防抖定时器
			}
		},
		created() {
			this.loadRechargeLogs()
		},
		methods: {
			// 加载充值记录
			async loadRechargeLogs() {
				this.loading = true
				try {
					const params = {
						keyword: this.keyword,
						page: this.page,
						limit: this.limit
					}

					const res = await rechargeApi.getRechargeLogList(params)
					if (res.code === 0) {
						// 如果是第一页，直接赋值
						if (this.page === 1) {
							this.rechargeList = res.data.list || []
						} else {
							// 否则追加数据
							this.rechargeList = [...this.rechargeList, ...(res.data.list || [])]
						}

						this.total = res.data.total || 0
						this.hasMore = this.rechargeList.length < this.total
					} else {
						uni.showToast({
							title: res.msg || this.$t('rechargeRecord.loadFailed'),
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载充值记录失败:', error)
					uni.showToast({
						title: this.$t('rechargeRecord.networkError'),
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 搜索防抖处理
			handleSearchInput() {
				if (this.searchTimer) clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					// 搜索时重置到第一页
					this.page = 1
					this.loadRechargeLogs()
				}, 500)
			},

			// 加载更多
			loadMore() {
				if (this.hasMore) {
					this.page += 1
					this.loadRechargeLogs()
				}
			},

			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return ''

				// 转换为 YYYY/MM/DD | hh:mmAM 格式
				const date = new Date(dateStr)
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				let hours = date.getHours()
				const minutes = date.getMinutes().toString().padStart(2, '0')
				const ampm = hours >= 12 ? 'PM' : 'AM'

				hours = hours % 12
				hours = hours ? hours : 12 // 0点转换为12

				return `${year}/${month}/${day} | ${hours}:${minutes}${ampm}`
			},

			// 格式化金额
			formatAmount(amount) {
				if (typeof amount !== 'number') return '$0.00'
				return `$${Math.abs(amount).toFixed(2)}`
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					0: this.$t('rechargeRecord.statusProcessing'),
					1: this.$t('rechargeRecord.statusSuccess'),
					2: this.$t('rechargeRecord.statusFailed')
				}
				return statusMap[status] || this.$t('rechargeRecord.statusUnknown')
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 0 40rpx;
		min-height: 90vh;
		background: #FBFCFF;

		.input-box {
			margin-top: 26rpx;
			height: 88rpx;
			background-color: #ebebeb;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 30rpx;
				left: 30rpx;
			}

			input {
				padding: 0 24rpx 0 98rpx;
				width: 100%;
				height: 100%;
				line-height: 88rpx;
				font-size: 28rpx;
			}
		}

		.title {
			margin: 42rpx 0 44rpx;
			color: #B7BAC2;
			font-size: 28rpx;
			line-height: 38rpx;

			view {
				color: #52A5F3;
			}
		}

		.list-box {
			.item-box {
				margin-bottom: 30rpx;
				width: 100%;
				height: 124rpx;
				background-color: #fff;
				box-shadow: 10rpx 10rpx 40rpx 0rpx rgba(223, 223, 223, 0.2);
				border-radius: 32rpx;
				font-size: 28rpx;
				padding: 0 34rpx;

				image {
					margin-right: 24rpx;
					flex: 0 0 60rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.card-name {
					font-size: 32rpx;
				}

				.time {
					color: #D9D9D9;
					font-size: 24rpx;
				}

				.price {
					&.add {
						color: #DC2C2C;
					}
				}
			}
		}
	}
</style>